import {
  FC,
  useRef,
  RefObject,
  useEffect,
  CSSProperties,
  useState,
} from 'react';

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
]);

interface dataItem {
  name: string;
  data: number[];
}

const buildOptions = (
  catrgory: string[],
  dataSource: dataItem[],
  colors: string[],
  unit: string,
  legend?: any,
) => {
  return {
    title: {
      show: unit ? true : false,
      text: `${unit}`,
      textStyle: {
        color: '#06FEF7',
        fontWeight: 'normal',
        fontSize: 14,
      },
      left: 40,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: true,
      icon: 'rect',
      textStyle: {
        color: '#A3D5FF',
      },
      ...legend,
    },
    grid: {
      left: 40,
      right: 40,
      bottom: 40,
      top: 50,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: catrgory,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1f579d',
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        align: 'center',
        width: 60,
        overflow: 'break',
        padding: [5, 0, 0, 0],
        showMaxLabel: true,
        lineHeight: 16,
        interval: 0,
      },
    },
    yAxis: {
      nameLocation: 'start',
      nameTextStyle: {
        color: '#06FEF7',
        fontWeight: 'normal',
        fontSize: 14,
      },
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1f579d',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1f579d',
          type: 'dotted',
        },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    series: buildSeries(dataSource, colors),
  };
};

const buildSeries = (dataSource: dataItem[], colors: string[]) => {
  return dataSource.map((item: dataItem, index: number) => ({
    ...item,
    type: 'line',
    itemStyle: {
      color: colors[index],
    },
  }));
};
interface Iprops {
  title?: string;
  width?: number;
  height?: number;
  category: string[];
  dataSource: dataItem[];
  style?: CSSProperties;
  colors?: string[];
  unit?: string;
  legend?: any;
}
const Line: FC<Iprops> = (props) => {
  const {
    width = 520,
    height = 340,
    category,
    dataSource,
    style,
    colors = [],
    unit = '',
    legend,
  } = props;
  const chartRef = useRef() as RefObject<HTMLDivElement>;
  const [chart, setChart] = useState<echarts.ECharts>();

  useEffect(() => {
    const chartDom = chartRef.current as HTMLElement;
    const currentChart = echarts.init(chartDom);
    setChart(currentChart);
  }, []);

  useEffect(() => {
    chart &&
      chart.setOption(buildOptions(category, dataSource, colors, unit, legend));
  }, [chart, category, dataSource, colors, unit, legend]);

  return (
    <div
      ref={chartRef}
      style={{
        ...style,
        width,
        height,
      }}
    ></div>
  );
};

export default Line;
